/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */

import React, { Component } from "react";

export default class App extends Component {
  a = 100;
  miref = React.createRef(); //严格模式下这样写
  state = { list: [{id:1,txt:"22"}, {id:2,txt:"33"}, {id:3,txt:"42"},{id:4,txt:"52"},] };
  render() {
    return (
      <div>
        {/* <input ref="mytext12"/> */}
        <input ref={this.miref} />
        <button
          onClick={() => {
            // console.log("click1",this.refs.mytext12.value)

            console.log("click", this.miref.current.value);
          }}
        >
          add1
        </button>

        <button onClick={this.handleClick2}>触发add</button>
     <ul style={{fontSize:"20px",fontWeight:"700"}}>
         {
             this.state.list.map((item,index)=>
            <li  key={item.id}>\
            {/* {{item.txt} }    */}
            {/* {富文本展示}  把html片段展示在页面中*/}
            <span dangerouslySetInnerHTML={{
              __html:item.txt
            }}></span>
              <button onClick={this.handleDelClick.bind(this,index)}>del</button>
             <button onClick={()=>this.handleDelClick(index)}>del箭头删除</button>
            </li>
      
            )
         }
     </ul>
   
{this.state.list.length === 0 ?   <div style={{fontSize:"20px",fontWeight:"700",color:"red"}}>暂无代办事项</div> : null} 
      </div>
    );
  }

  handleClick2 = () => {
   
    let newList=[...this.state.list]  //不要直接引用
    newList.push({id:Math.random()*10,txt:this.miref.current.value})  //后台能看到增加 但改变状态需要用setState
    this.setState({list:newList})
    console.log("click2触发ref事件", this.miref.current.value,newList);
    this.miref.current.value=""  //增加后重置
  };
  handleDelClick=(index)=>{
console.log("要删除的下标",index);
// let newList=[...this.state.list]
let newList=this.state.list.slice()  //2者的效果是一样的 都是浅拷贝
newList.splice(index,1)
this.setState({list:newList})
  }
}
